<template>
  <div>

    <!-- 时间选择器对话框 -->
    <el-dialog title="预约" :visible.sync="dialogVisible" width="30%">
      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker
          v-model="appointTime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAppoint()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 评分对话框 -->
    <el-dialog title="评分" :visible.sync="dialogVisible1" width="20%">
      满意度：<el-input
        v-model="score"
        style="width: 200px"
        autocomplete="off"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitScore()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 表格 -->
    <el-table :data="data" stripe height="713">
      <el-table-column
        v-for="info in rightHeader"
        :key="info.key"
        :property="info.key"
        :label="info.label"
      >
        <template slot-scope="scope">
          <!-- 渲染对应表格里面的内容 -->
          {{ scope.row[scope.column.property] }}
        </template>
      </el-table-column>

      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <el-tag v-model="scope.row.status" size="small">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>

      <!-- 编辑按钮 -->
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-button @click="editOrder(scope.row, scope.$index)"
            >编辑</el-button
          >
        </template>
      </el-table-column>

      <!-- 删除按钮 -->
      <el-table-column label="删除">
        <template slot-scope="scope">
          <el-button @click="deleteOrder(scope.row)">删除</el-button>
        </template>
      </el-table-column>

      <!-- 客户页面才能预约/评分 -->
      <!-- <el-table-column label="预约">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status=='待预约'?false:true"
          @click="startAppoint(scope.row, scope.$index)"
            >开始预约</el-button
          >
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="评分">
        <template slot-scope="scope">
          <el-button @click="startScore(scope.row, scope.$index)"
            >评分</el-button
          >
        </template>
      </el-table-column> -->

      <!-- 维修员才能领取任务 -->
      <!-- <el-table-column label="领取任务">
        <template slot-scope="scope">
          <el-button
            :disabled="scope.row.status == '待领取' ? false : true"
            @click="receive(scope.row, scope.$index)"
            >领取</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 分页 -->
    <div class="blockPage">
      <div style="margin-top: 0.2rem; margin-left: 0.2rem">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 7, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 编辑订单对话框 -->
    <el-dialog title="修改订单信息" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="空调类型" :label-width="formLabelWidth">
          <el-input v-model="edit.airCondType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="故障码" :label-width="formLabelWidth">
          <el-input v-model="edit.airCondCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="故障原因" :label-width="formLabelWidth">
          <el-input
            v-model="edit.speculateReason"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="维修建议" :label-width="formLabelWidth">
          <el-input v-model="edit.repairReco" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { eachMapping } from "@jridgewell/trace-mapping";
import axios from "axios";
import { TypedChainedSet } from "webpack-chain";
export default {
  data() {
    return {
      score: "",
      rightHeader: [
        {
          label: "订单编号",
          key: "id",
        },
        {
          label: "申请人",
          key: "applyUser",
        },
        {
          label: "提交时间",
          key: "submitTime",
        },
        {
          label: "空调类型",
          key: "type",
        },
        {
          label: "故障原因",
          key: "reason",
        },
        {
          label: "预约时间",
          key: "appointTime",
        },
        {
          label: "维修员",
          key: "repairer",
        },
        {
          label: "满意度",
          key: "score",
        },
      ],
      data: [],
      pagesize: 5,
      currentPage: 1,
      totals: 10,
      edit: {
        id: "",
        airCondType: "",
        airCondCode: "",
        speculateReason: "",
        repairReco: "",
      },
      dialogFormVisible: false,
      dialogVisible1: false,
      index: "",
      formLabelWidth: "120px",

      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      appointTime: "",
      value2: "",
      value3: "",
      dialogVisible: false,
      token:JSON.parse(localStorage.getItem("user")).token
    };
  },

  // 每次刷新页面就加载分页数据
  mounted: function () {
    this.onLoad(1, 10);
  },


  methods: {

    // 每页数据条数改变时的事件
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
      this.onLoad(this.currentPage, val);
    },

    // 页号改变时的事件
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log("this.currentPage=" + this.currentPage);
      console.log("this.pagesize=" + this.pagesize);
      this.onLoad(this.currentPage, this.pagesize);
    },

    // 加载分页数据
    onLoad(current, size) {
      axios({
        method: "post",
        url: "http://localhost:9090/order/page",
        data: {
          current: current,
          size: size,
        },
      })
        .then((res) => {
          console.log("分页查询order成功，data:", res.data);
          this.data = res.data.records;
          this.totals = res.data.total;
          console.log("totals:=" + this.totals);
        })
        .catch((err) => {
          console.log(err);
          console.log("addPart");
        });
    },


    // 编辑订单
    editOrder(order, index) {
      this.dialogFormVisible = true;
      this.index = index;
    },
    handleConfirm() {
      this.edit.id = JSON.stringify(this.data[this.index].id);
      axios({
        method: "post",
        url: "http://localhost:9090/order/edit",
        data: {
          id: this.edit.id,
          airCondType: this.edit.airCondType,
          airCondCode: this.edit.airCondCode,
          speculateReason: this.edit.speculateReason,
          repairReco: this.edit.repairReco,
        },
      })
        .then((res) => {
          this.$message({
            message: "订单编辑成功",
            type: "success",
          });
          console.log("订单编辑成功");
        })
        .catch((err) => {
          this.$message.error("订单编辑失败");
          console.log("订单编辑失败---" + err);
        });
      console.log(this.edit, "sdfasfsadf");
      this.dialogFormVisible = false;
    },


    // 删除订单
    deleteOrder(item) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method: "post",
            url: "http://localhost:9090/order/delete",
            data: {
              id: item.id,
            },
          })
            .then((res) => {
              console.log("删除成功");
              this.data.forEach((order, index, arr) => {
                if (order.id == item.id) {
                  arr.splice(index, 1);
                }
              });
            })
            .catch((err) => {
              console.log("失败---" + err);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 点击预约按钮的事件
    startAppoint(item, index) {
      this.dialogVisible = true;
      this.index = index;
      console.log(index);
    },

    //确认预约对话框的事件
    submitAppoint() {
      console.log("appointTime:", this.appointTime);
      axios({
        method: "post",
        url: "http://localhost:9090/order/appoint",
        data: {
          id: this.data[this.index].id,
          appointTime: this.appointTime,
        },
      })
        .then((res) => {
          this.$message({
            message: "订单已成功预约",
            type: "success",
          });
          console.log("订单已成功预约");
          this.data[this.index].appointTime = this.appointTime;
          this.data[this.index].status = "待领取";
        })
        .catch((err) => {
          this.$message.error("预约失败");
          console.log("失败---" + err);
        });
      this.dialogVisible = false;
    },

    // 点击评分按钮的事件
    startScore(item, index) {
      if (this.data[index].status !== "已完成") {
        this.$message("订单当前状态不能评分");
        return;
      }
      this.dialogVisible1 = true;
      this.index = index;
      console.log(index);
    },

    // 评分对话框确认的事件
    submitScore() {
      axios({
        method: "post",
        url: "http://localhost:9090/order/score",
        data: {
          id: this.data[this.index].id,
          score: this.score,
        },
      })
        .then((res) => {
          console.log("订单已成功评分");
          this.$message({
            message: "订单已成功评分",
            type: "success",
          });
          this.data[this.index].score = this.score;
          this.data[this.index].status = '已评分';
        })
        .catch((err) => {
          this.$message.error("评分失败");
          console.log("失败---" + err);
        });
      this.dialogVisible1 = false;
    },

    // 领取任务
    receive(item, index) {
      axios({
        method: "post",
        url: "http://localhost:9090/order/receive",
        data: {
          id: item.id,
        },
        headers: {
          token: this.token,
        },
      })
        .then((res) => {
          console.log("任务已成功领取");
          this.$message({
            message: "任务已成功领取",
            type: "success",
          });
          this.data[index].status = "待领取";
        })
        .catch((err) => {
          this.$message.error("任务领取失败");
          console.log("任务领取失败---" + err);
        });
    },
  },
};
</script>
